{extend name="common/layout" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit">
    <div class="padding30">
    <h3 class="page-box-title">{:lang('POP')}</h3>   
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input layui-search-input" name="key" id="key" placeholder="{:lang('Please enter the keyword')}">
        </div>
        <button class="layui-btn layui-search-btn" id="search" data-type="reload">{:lang('Search')}</button>
          <button class="layui-btn  borderrad5" data-title="{:lang('import')}" data-btn="{:lang('Next Step')}"  type="button" data-model="pops" data-url="{:U('UpFiles/import',['model'=>'pops'])}" id="_upload">{:lang('import')}</button>
        
        <div style="clear: both;"></div>
    </div>
        
    </div>

    <div class="" id="_listBox">
    <div style="text-align: right;"><a href="#" data-href="{:url('edit')}"  class="layui-btn layui-btn-normal layui-btn-add borderrad5 _showform" title="{:lang('Add')}" ><i class="icon icon-plus"></i></a></div>
    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
</div>
{/block}
{block name="footer"}
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.sort}}" size="10"/>
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="{:lang('No|Off')}" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="action">
    <a href="#" data-href="{:url('edit')}?id={{d.id}}" class=" _showform ">{:lang('Edit')}</a> | 
    <a class="s" lay-event="delete">{:lang('Delete')}</a>
</script>
   <script type="text/javascript">
   	layui.use('table', function() {
   		 var table = layui.table, $ = layui.jquery,form = layui.form;
   		 var tableIn = table.render({
            elem: '#list'
            ,url: '{:url("index")}',
            method:'post',
            page:getPageThume()
            ,cols: [[
                // {checkbox: true, fixed: true},
                {field:'name', title: "{:lang('Name')}", width:"15%"},
                {field:'country', title: "{:lang('Region')}", width:"10%",sort:true},
                {field:'city', title: "{:lang('City')}", width:"13%",sort:true},
                {field:'address', title: "{:lang('Address')}", width:"20%"},
                {field: 'status', align: 'center', title: '{:lang("Status")}', width:"8%", toolbar: '#status'},
                // {field: 'sort', align: 'center', title: '{:lang("Sort")}', width: "10%", templet: '#order',sort:true}
                {width:"10%",title: "", align:'right', toolbar: '#action'}
            ]]
        });
         form.on('switch(status)', function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var status = obj.elem.checked===true?1:0;
            $.post('{:url("editState")}',{'id':id,'status':status},function (res) {
                layer.close(loading);
                if (res.status==1) {
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })
        });
          table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'delete'){
                layer.confirm('{:lang("Are you sure you want to delete the record?")}', function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delete')}",{id:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        $("body").on("click","._showform",function(){
            var url = $(this).data('href');
              layer.open({
                type: 2, //此处以iframe举例
                title: "{:lang('New Configuration')}",
                area: ['760px', '500px'],
                shade: 0.7,
                maxmin: true,
                content:url
             })
        })
          //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            tableIn.reload({
                where: {key: key}
            });
        });
         $('body').on('blur','.list_order',function() {
            var id = $(this).attr('data-id');
            var sort = $(this).val();
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("sort")}',{id:id,sort:sort},function(res){
                layer.close(loading);
                if(res.code === 1){
                    layer.msg(res.msg, {time: 1000, icon: 1});
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            })
        });
        
   	})
   </script>
{/block}